<script type="text/javascript" src="${rc.getContextPath()}/manage/styles/treeGrid/javascripts/jquery.treetable-ajax-persist.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/manage/styles/treeGrid/javascripts/jquery.treetable-3.0.0.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/manage/styles/treeGrid/javascripts/persist-min.js"></script>
<link href="${rc.getContextPath()}/manage/styles/treeGrid/stylesheets/jquery.treetable.css" media="all" rel="stylesheet" type="text/css" />
<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">

<#macro treeGridComponents components d>
 <#if components?? && (components?size) gt 0> 
 <#list components as component>
     <tr data-tt-id="${d+component_index}" 
         <#if component.bomCode!=bom.bomCode>
             data-tt-parent-id="${d}" 
         </#if> 
     >
         <td>${component.componentCode!''}</td>
         <td>${component.componentText!''}</td>
         <td>${component.quantity!''}</td>
     </tr>
    <@treeGridComponents components=component.childComponents d=d+component_index />
  </#list> 
 </#if>
 </#macro>
 
<style>

.BOMComponentTable
{
 border-bottom: solid 1px #ededed;
}

.BOMComponentTable tr td{
    width:200px;
}

.BOMComponentTable tr td{
    text-align: left;
    overflow: hidden;
    padding: 0px 10px;
    vertical-align: middle;
    line-height: 22px;
    height: 22px;
    border-top: solid 1px #f7f7f7;
    border-right: solid 1px #ededed;
}
.BOMComponentTable tbody tr:first-child td{
      border-top: 0px;
}
.BOMComponentTable tr td:first-child
{ 
    
  border-top: solid 1px #f7f7f7;
  border-left: solid 1px #ededed;
  border-right: solid 1px #ededed;
}

.BOMComponentTable tr th:first-child
{
    border-color: #DFE4E8;
    border-style: solid;
    border-width: 1px;
}

.BOMComponentTable tr th{
    text-align: left;
    padding: 0px 10px;
    border-style: solid;
    border-width: 1px 1px 1px 0px;
    white-space: nowrap;
    line-height: 30px;
    border-color: #DFE4E8;
    background-color: #FAFCFC;
    color: #797E80;
    font-weight: bold;
    height: 26px;
}
 
 
 </style>
<form method="post" action="${rc.getContextPath()}/manage/bom/saveBOM" class="pageForm required-validate" onsubmit="return bom.tsubmit(this);">
    <div class="pageContent">
        <div class="pageFormContent"  >
        <input type="hidden" name="navTabId" value="${navTabId!''}">
        <input type="hidden" name="id" value="<#if (bom.bomCode)??>${bom.bomCode!''}</#if>">
        <fieldSet>
            <dl>
                <dt><@label key="bomCode.C,colon">物料清单编号：</@label></dt>
                <dd>
                    <input type="text"  name="bomCode" value="${bom.bomCode!''}" class="required" readonly="readonly" >
                </dd>
            </dl>
            <dl>
                <dt><@label key="description.C,colon">描述：</@label></dt>
                <dd>
                    <input type="text"  name="bomText" value="${bom.bomText!''}" class="required" readonly="readonly"/>
                </dd>
            </dl>
            <dl>
                    <dt>&nbsp;</dt>
                    <dd>
                        <label><input type="checkbox" name="lockFlag" value="1" disabled="disabled"
                        <#if bom.lockFlag==1>
                            checked="checked"
                        </#if>
                        ><@label key="lock.C">锁定</@label></label>
                    </dd>
                </dl>
        </fieldSet>
        <div class="panel" style="width:100%;margin:0 0 5px 0;border-top:1px solid #d8dfe5;">
                    <div >
                        <div id="theadDiv">
                            <table id="BOMComponentThead" class="BOMComponentTable" style="overflow:scroll"width="100%">
                                <thead>
                                    <tr id="theadTr">
                                        <th><@label key="bomComponentCode.C">组件编号</@label></th>
                                        <th><@label key="bomComponentText.C">组件描述</@label></th>
                                        <th><@label key="quantity.C">数量</@label></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                         <table id="BOMComponentTable" class="BOMComponentTable" width="100%" layoutH="230">
                            <tbody>
                                <@treeGridComponents bom.components "p" />
                            </tbody>
                        </table>
                    </div>
            </div> 
    </div>
    <#if bom.bomCode??> 
        <#assign createInfo=bom />
        <#include "/common/createInfo.html">
    </#if>    
    <div class="formBar">
            <ul>
                <li>
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="button" class="close">
                                    <@label key="close.B">关闭</@label>
                            </button>
                        </div>
                    </div>
                </li>
            </ul>
    </div>
    
<script>
    var dialog=$.pdialog.getCurrent();
    $("#BOMComponentTable",dialog).find("thead tr").empty();
    var $table=$("#BOMComponentTable",dialog);
    var $theadTh=$("#theadTr th",dialog);
     $table.find("tr:first > td").each(function(i,o){
             $theadTh[i].width=$(this).width();
         });

     $table.agikiTreeTable({persist: false});  //true为保存上次树的展开状态
     
     $table.on("click","tr",function(){
          var d=$("#BOMComponentThead thead",dialog).width()-$table.find("tbody").width();
          if(d>0){
              $("#theadDiv",dialog).width($table.find("tbody").width());
          }
          else
         {
              $("#theadDiv",dialog).css("width","100%");
         }
         $(this).find("td").each(function(i,o){
             $theadTh[i].width=$(this).width();
         });
     })
</script>            
            